<template>
    <div class="">
        <Row :gutter="16">
            <Col span="6">
                <platform-select v-model="queryData.PlatformId"></platform-select>
            </Col>
            <Col span="6">
                <input-text label="日志内容" v-model="queryData.Content" placeholder="请输入日志内容关键字"></input-text>
            </Col>
            <Col span="6">
                <input-text label="业务位置" v-model="queryData.BusinessPosition" placeholder="请输入业务位置"></input-text>
            </Col>
            <Col span="6">
                <input-text label="堆栈信息" v-model="queryData.TraceInfo" placeholder="请输入堆栈关键字"></input-text>
            </Col>
        </Row>
        <br/>
        <Row :gutter="16">
            <Col span="7">
                <datetime-range label="生成时间" placeholder="请输入日志生成时间范围"
                                :startDateTime="queryData.CreatTimeFrom"
                                :endDateTime="queryData.CreatTmeTo"
                                @on-range-change="handleRangeChange">
                </datetime-range>
            </Col>
            <Col span="7">
                <input-text label="请求Id" v-model="queryData.RequestId"></input-text>
            </Col>
        </Row>
    </div>
</template>

<script>
    import PlatformSelect from '_c/platform-select';
    import {createNamespacedHelpers} from 'vuex';
    import InputText from '_c/input-text';
    import DatetimeRange from '_c/datetime-range';

    const {mapActions, mapState, mapMutations, mapGetters} = createNamespacedHelpers('warnlog');

    export default {
        name: 'Query',
        components: {
            PlatformSelect,
            InputText,
            DatetimeRange
        },
        data() {
            return {
                //查询条件数据
                queryData: {}
            };
        },
        methods: {
            ...mapMutations([
                'setQueryData'
            ]),
            handleRangeChange(startDate, endDate) {
                this.queryData.CreatTimeFrom = startDate;
                this.queryData.CreatTmeTo = endDate;
                this.setQueryData(this.queryData);
            }
        },
        watch: {
            queryData: {
                handler(newValue, oldValue) {
                    this.setQueryData(newValue);
                },
                deep: true
            },
        },
    };
</script>

<style scoped>
    .row {
        line-height: 28px;
        height: 28px;
    }
</style>
